<template>
  <page-view>
    <div class="main bg-backgroundColor w-full flex">
      <div class="back  w-1/3 h-[800px]  border">
        <p class="text-lg font-semibold">商城类</p>
        <div class="w-[360px] h-[480px] mt-[230px] ml-[70px]  overflow-auto">
          <el-scrollbar height="500px">
            <el-skeleton :rows="12" animated v-show="isShowSkeleton" />
            <ul>
              <!-- v-if="item.messageType==='商城类'" -->
              <li v-show="item.messageType === '商城类'" v-for="item in messageAllInfo" :key="item"
                class="bg-red w-[340px] m-[10px] h-auto border">
                <div class="w-[320px] m-[10px] h-auto border">
                  <p class="break-all overflow-clip">&nbsp;&nbsp;{{ item.content }}</p>
                  <p class=" text-cyan-600 text-xs ml-[220px] mt-[50px] truncate">-----{{ item.name }}</p>
                </div>

                <div class="w-[320px] m-[10px] h-auto border">
                  <p class="s font-bold">&nbsp;&nbsp;管理员回复:</p>
                  <p v-if="item.messageReply" class="mt-[20px] break-all overflow-clip">&nbsp;&nbsp;{{
                    item.messageReply.replyContent
                  }}
                  </p>
                </div>
              </li>
            </ul>

          </el-scrollbar>
        </div>
      </div>
      <div class="back  w-1/3 h-[800px]  border">
        <p class="text-lg font-semibold">社交类</p>
        <div class="w-[360px] h-[480px] mt-[230px] ml-[70px] overflow-auto">
          <el-scrollbar height="500px">
            <el-skeleton :rows="12" animated v-show="isShowSkeleton" />
            <ul>
              <!-- v-if="item.messageType==='社交类'" -->
              <li v-show="item.messageType === '社交类'" v-for="item in messageAllInfo" :key="item"
                class="bg-red w-[340px] m-[10px] h-auto border">
                <div class="w-[320px] m-[10px] h-auto border">
                  <p class="break-all overflow-clip">&nbsp;&nbsp;{{ item.content }}</p>
                  <p class=" text-cyan-600 text-xs ml-[220px] mt-[50px] truncate">-----{{ item.name }}</p>
                </div>

                <div class="w-[320px] m-[10px] h-auto border">
                  <p class="s font-bold">&nbsp;&nbsp;管理员回复:</p>
                  <p v-if="item.messageReply" class="mt-[20px] break-all overflow-clip">&nbsp;&nbsp;{{
                    item.messageReply.replyContent
                  }}
                  </p>
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
      <div class="back  w-1/3 h-[800px]  border">
        <div class="flex">
          <p class="text-lg font-semibold">系统类</p>
          <el-button class="ml-[380px]" type="success" @click="dialogFormVisible = true">留言</el-button>
          <el-dialog v-model="dialogFormVisible" title="留下您宝贵的回复">
            <el-form :model="form">
              <el-form-item label="留下您宝贵的回复" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off" type="textarea" />
              </el-form-item>
              <el-form-item label="留言类型" :label-width="formLabelWidth">
                <el-select v-model="form.messageType" placeholder="请选择一个类别">
                  <el-option label="商城类" value="商城类" />
                  <el-option label="社交类" value="社交类" />
                  <el-option label="系统类" value="系统类" />

                </el-select>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">
                  确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        <div class="w-[360px] h-[480px] mt-[230px] ml-[70px] overflow-auto">
          <el-scrollbar height="500px">
            <el-skeleton :rows="12" animated v-show="isShowSkeleton" />

            <ul>
              <!-- v-if="item.messageType==='系统类'" -->
              <li v-show="item.messageType === '系统类'" v-for="item in messageAllInfo" :key="item"
                class="bg-red w-[340px] m-[10px] h-auto border">
                <div class="w-[320px] m-[10px] h-auto border">
                  <p class="break-all overflow-clip">&nbsp;&nbsp;{{ item.content }}</p>
                  <p class=" text-cyan-600 text-xs ml-[220px] mt-[50px] truncate">-----{{ item.name }}</p>
                </div>

                <div class="w-[320px] m-[10px] h-auto border">
                  <p class="s font-bold">&nbsp;&nbsp;管理员回复:</p>
                  <p v-if="item.messageReply" class="mt-[20px] break-all overflow-clip">&nbsp;&nbsp;{{
                    item.messageReply.replyContent
                  }}
                  </p>
                </div>
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </page-view>
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue';
import { ElNotification, ElMessage, ElLoading } from "element-plus";
import API from '../../utils/API';

let dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
})
const isShowSkeleton = ref(false)
let messageAllInfo = ref([])
const messageAll = () => {
  isShowSkeleton.value = true;
  API.MessageInfo.messageAll().then((response) => {
    console.log(response);
    messageAllInfo.value = response;
  }).finally(() => {
    isShowSkeleton.value = false;
  })
}
messageAll()
const submit = () => {
  API.MessageInfo.messageAdd(form).then((response) => {
    console.log(response, "sasaS")
    dialogFormVisible.value = false;
    //留言成功提示
    ElNotification({
      title: "提示",
      message: `发表成功!请等待审核~`,
      type: "success"
    });
  })
}
</script>

<style scoped lang="scss">
.back {
  background-image: url('../../assets/img/message.png');
  background-size: 500px 800px;
  background-repeat: no-repeat;
}

:deep(.el-skeleton__item) {
  background-color: red;
}
</style>